<template>
  <div style="margin: 20px 20px">
    <el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        @check="checkeTree"
        :check-strictly="true"
        :props="defaultProps">
      </el-tree>
    <el-button :disabled="saveBtnDisabled" type="primary" @click="save">保存</el-button>
  </div>
</template>
<script>
// import menu from '@/api/acl/menu'

export default {
  data() {
    return {
      saveBtnDisabled:false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      roleId:''

    };
  },
  // 监听器
  watch: {
    $route(to, from) {
      console.log('路由变化......')
      console.log(to)
      console.log(from)
      this.init()
    }
  },

  created () {
    // this.init()
  },
  methods: {
    init(){
      if (this.$route.params && this.$route.params.id) {
          this.roleId = this.$route.params.id
          this.fetchDataById(this.roleId)
      }
    },
    fetchDataById(roleId){
        menu.toAssign(roleId).then(response => {
            this.data = response.data.children
            var jsonList = JSON.parse(JSON.stringify(this.data))
            var list = []
            console.log("最终集合")
            console.log(jsonList)
            this.getJsonToList(list, jsonList[0]['children'])
            console.log(list)
            this.setCheckedKeys(list)
        })
    },
    //把json数据转成string再转成对象，根据Key获取value数据
    getJsonToList(list, jsonList){
        if(jsonList!==null){
          list.push(1)
        }
        //遍历这个集合对象，获取key的值
        for(var i = 0; i < jsonList.length; i++){
            if(jsonList[i]['select'] == true ){
                list.push(jsonList[i]['id'])
            }
            if(jsonList[i]['children'] != null){
              this.getJsonToList(list, jsonList[i]['children'])
            }
        }
    },
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },

    setCheckedKeys(list) {
      this.$refs.tree.setCheckedKeys(list);
    },

    save(){
      // this.saveBtnDisabled = true
      // var ids = this.$refs.tree.getCheckedKeys().join(",");
      // //vue elementUI tree树形控件获取父节点ID的实例
      // //node_modules\element-ui\lib\element-ui.common.js
      // //25348行修改源码
      // console.log('ids'+ids);
      // console.log(this.$refs.tree.getCheckedNodes())
      // console.log('getchecknodes');
      // menu.doAssign(this.roleId, ids).then(response => {
      //     if(response.success){
      //         this.$message({
      //           type:'success',
      //           message:'保存成功'
      //         })
      //         this.$router.push({ path: '/acl/role/list' })
      //       }
      // })
      this.$emit("getFunction",'function')
    },
    // methods方法
    // 选中子节点，默认选中父节点
    checkeTree (data) {
      let thisNode = this.$refs.tree.getNode(data.id) // 获取当前节点
      const keys = this.$refs.tree.getCheckedKeys() // 获取已勾选节点的key值

      if (thisNode.checked) { // 当前节点若被选中
        for (let i = thisNode.level; i > 1; i--) { // 判断是否有父级节点
          if (!thisNode.parent.checked) { // 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
            thisNode = thisNode.parent
            keys.push(thisNode.data.id)
          }
        }
      }

      this.$refs.tree.setCheckedKeys(keys) // 将所有keys数组的节点全选中

      this.setCheckedKeys(keys)
      console.log('setCheck')
      console.log(this.$refs.tree.getCheckedKeys())
    },
    cancel () {
      this.$refs.tree.setCheckedKeys([1, 4, 2])
      console.log(this.$refs.tree.getHalfCheckedKeys())
      // this.$emit('dialogSwitch')
    }

  }
};
</script>
